<template>
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose" :visible="true" :title="title" width="800px">
    <el-form ref="form" :model="form" size="small" :disabled="disabled" label-width="100px">
      <el-table :data="tableData" style="margin-bottom: 20px;">
        <el-table-column prop="parameter" label="项目" />
        <el-table-column prop="jsd60" label="角速度60" >
          <template #default="scope">
            <el-input v-model="scope.row.jsd60" type="number"/>
          </template>
        </el-table-column>
        <el-table-column prop="jsd75" label="角速度75" >
          <template #default="scope">
            <el-input v-model="scope.row.jsd75" type="number"/>
          </template>
        </el-table-column>
        <el-table-column prop="jsd90" label="角速度90" >
          <template #default="scope">
            <el-input v-model="scope.row.jsd90" type="number"/>
          </template>
        </el-table-column>
        <el-table-column prop="jsd105" label="角速度105" >
          <template #default="scope">
            <el-input v-model="scope.row.jsd105" type="number"/>
          </template>
        </el-table-column>
        <el-table-column prop="jsd120" label="角速度120" >
          <template #default="scope">
            <el-input v-model="scope.row.jsd120" type="number"/>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-form-item label="角速度60_持续时间">
        <el-input v-model="form.jsd60Sj" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度60_神经反应">
        <el-input v-model="form.jsd60Fy" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度75_持续时间">
        <el-input v-model="form.jsd75Sj" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度75_神经反应">
        <el-input v-model="form.jsd75Fy" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度90_持续时间">
        <el-input v-model="form.jsd90Sj" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度90_神经反应">
        <el-input v-model="form.jsd90Fy" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度105_持续时间">
        <el-input v-model="form.jsd105Sj" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度105_神经反应">
        <el-input v-model="form.jsd105Fy" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度120_持续时间">
        <el-input v-model="form.jsd120Sj" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="角速度120_神经反应">
        <el-input v-model="form.jsd120Fy" style="width: 370px;" />
      </el-form-item> -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="功能评级">
            <el-select
              style="width: 100%;"
              v-model="form.gnpj"
              placeholder="请选择"
            >
              <el-option
                v-for="[key, value] in qtgnLevels"
                :key="value"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反应分级">
            <el-select
              style="width: 100%;"
              v-model="form.fypj"
              placeholder="请选择"
            >
              <el-option
                v-for="[key, value] in sjfyLevels"
                :key="value"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item label="建议">
        <el-input v-model="form.jy" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="评定结果">
            <el-select
              v-model="form.result"
              placeholder="请选择"
            >
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="记录人" prop="createBy">
            <el-input v-model="form.createBy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="记录日期" prop="createTime">
            <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="date" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>

    </div>
  </el-dialog>
</template>

<script>
import {get, add, edit} from '@/api/trainQtgnwdx'


import { RATE_RESULTS, SKILL_LEVELS, SJFY_LEVELS, QTGN_LEVELS} from '@/utils/constants'
import { form2Table, table2Form } from '../../../utils/table';


const defaultForm = { id: null, trainId: null, trainItemId: null, jsd60Sj: null, jsd60Fy: null, jsd75Sj: null, 
  jsd75Fy: null, jsd90Sj: null, jsd90Fy: null, jsd105Sj: null, jsd105Fy: null, jsd120Sj: null, jsd120Fy: null, 
  gnpj: null, fypj: null, result: null, jy: null, createBy: null, date: null }


export default {
  name: 'QtgnwdxDialog',
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    },
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      form: { ...defaultForm },
      tableData: [
        { 
          parameter: '维持时间',
          jsd60: null,
          jsd75: null,
          jsd90: null,
          jsd105: null,
          jsd120: null,
        },
        {
          parameter: '神经反应',
          jsd60: null,
          jsd75: null,
          jsd90: null,
          jsd105: null,
          jsd120: null,
        }
      ],
      title: '前庭功能稳定性训练',
      skillLevels: SKILL_LEVELS,
      qtgnLevels: QTGN_LEVELS,
      sjfyLevels: SJFY_LEVELS,
      resultOptions: RATE_RESULTS,
      isLoading: false // 提交按钮的加载状态
    };
  },
  methods: {
    emit: function(event) {

    },
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done(); // 调用done()来关闭对话框        
      }
    },
    handleCommit() {
      table2Form(this.tableData, this.form,'jsd');
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    console.log(this.trainId, this.itemId);
    if (this.trainId !== -1) {
      this.shouldUpdate = false;

      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        form2Table(this.form, this.tableData,'jsd');
        console.log(response, this.form);

      });
    }
  },
  updated() {
  },
  mounted() {
  }
}
</script>

<style scoped>


</style>